<template>
  <div class="bridge">
    <el-card class="box-card right">
        <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="addDialogEquipment"
        style="float:right;margin-bottom:20px;"
        >新增一级分类</el-button>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
        stripe
        max-height="500"
        size="small"
        @expand-change="expand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" stripe size="small">
              <el-table-column label="二级分类名称" prop="name" show-overflow-tooltip></el-table-column>
              <el-table-column label="编码" prop="id" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="修改">
                    <el-button type="text" icon="el-icon-edit-outline" @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除">
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      style="color:red !important"
                      @click="removeBridge(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="一级分类名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="编码" prop="id" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="新增二级分类">
              <el-button type="text" icon="el-icon-plus" @click="addEquipment(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color:red !important"
                @click="deleteGroup(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change=" "
        ></el-pagination>
      </div> -->
    </el-card>
    <vx-popup
      :title="groupTitle"
      width="410px"
      @close="pontinecancel"
      :active.sync="addVisible"
      @confirmPopup="pontineAdd"
      @cancelPopup="pontinecancel"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="一级分类名称:" prop="name">
          <el-input v-model.trim="addForm.name" size="small" clearable></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>
    <vx-popup
      :title="addtitle"
      width="410px"
      @close="cancelFormSubmit"
      :active.sync="dialogVisible"
      @confirmPopup="submit"
      @cancelPopup="cancelFormSubmit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
            <el-form-item label="二级分类名称:" prop="name">
              <el-input v-model.trim="ruleForm.name" size="small" clearable></el-input>
            </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>
<script>
// 滚动条
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import { deepClone } from "@/util.js";
export default {
  data() {
    return {
      imgList: [],
      addtitle: "新增二级分类",
      groupTitle: "新增一级分类",
      addVisible: false, //桥组显示隐藏
      dialogVisible: false,
      loading: true,
      index: false,
      tableData: [],
      addForm: {
        name: ""
      },
      addRules: {
        name: [
          { required: true, message: "请输入一级分类名称", trigger: "blur" }
        ]
      },
      ruleForm: {
        name: ""
      },
      rules: {
        name: [{ required: true, message: "请输入桥梁名称", trigger: "blur" }]
      },
      groupId: ""
    };
  },
  created() {
    this.queryBridgeGroup();
  },
  components: {
    VuePerfectScrollbar
  },
  methods: {
    //桥组查询
    queryBridgeGroup() {
      this.$api.bridge.queryAllFirstSystemDataType().then(res => {
        if (res.data.success) {
          let _obj = deepClone(res.data.data[0]);
          _obj.forEach((item, index) => {
            item.children = [];
          });
          this.tableData = deepClone(_obj);
          this.loading = false;
        }
      })
    },
    resetGroup() {
      this.addForm = {
        name: ""
      }
    },
    // 新增桥组
    addDialogEquipment() {
      this.groupTitle = "新增一级分类"
      this.$refs["addForm"].resetFields()
      this.addVisible = true
    },
    // 桥组修改弹框
    handelEdit(val) {
      this.groupTitle = "修改一级分类";
      this.addForm = JSON.parse(JSON.stringify(val))
      this.addVisible = true
    },
    //删除桥组
    deleteGroup(val) {
      this.$confirm("此操作将删除一级分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge.deleteSystemDataTypeById({ id: val }).then(res => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success"
              });
              this.queryBridgeGroup();
            }
          });
        })
        .catch(() => {});
    },
    // 取消桥组
    pontinecancel() {
      this.addVisible = false;
      this.resetGroup();
    },
    // 桥组确认
    pontineAdd() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          if (this.groupTitle === "新增一级分类") {
              let data = {
                  pId: "-1",
                  name: this.addForm.name
              }
            this.$api.bridge.addDataType(data).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "新增成功",
                  color: "success"
                });
                this.addVisible = false;
                this.resetGroup();
                this.queryBridgeGroup()
              }
            });
          } else {
            let data = {
              id: this.addForm.id,
              name: this.addForm.name,
              pId: "-1"
            };
            this.$api.bridge.updateDataType(data).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "修改成功",
                  color: "success"
                });
                this.addVisible = false;
                this.resetGroup();
                this.queryBridgeGroup();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    //表格展开
    expand(row, index) {
      this.index = !this.index;
      console.log(row.id)
      this.queryAllSystemDataTypeByParentId(row.id);
    },
    //获取桥梁
    queryAllSystemDataTypeByParentId(id) {
      this.$api.bridge.queryAllSystemDataTypeByParentId({parentId: id }).then(res => {
        if (res.data.success) {
          this.tableData.forEach((item, index) => {
            if (id === item.id) item.children = res.data.data[0];
          });
        }
      });
    },
    // 新增弹框
    addEquipment(val) {
      this.addtitle = "新增二级分类";
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = true;
      this.groupId = val;
    },
    //编辑桥梁
    edit(val) {
      this.addtitle = "修改二级分类";
      this.ruleForm = JSON.parse(JSON.stringify(val))
      this.dialogVisible = true;
    },
    //删除桥梁
    removeBridge(val) {
      this.$confirm("此操作将删除二级分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge.deleteSystemDataTypeById({ id: val.id }).then(res => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success"
              });
              this.queryAllSystemDataTypeByParentId(val.pId);
            }
          });
        })
        .catch(() => {});
    },
    resetBridge() {
      this.ruleForm = {
        name: ""
      };
    },
    cancelFormSubmit() {
      this.dialogVisible = false;
      this.resetBridge();
    },
    //桥梁新增
    submit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
            if (this.addtitle === "新增二级分类") {
              this.$api.bridge
                .addDataType({ ...this.ruleForm, pId: this.groupId })
                .then(res => {
                  if (res.data.success) {
                    this.$vs.notify({
                      text: "新增成功",
                      color: "success"
                    });
                    this.dialogVisible = false;
                    this.resetBridge()
                    this.queryAllSystemDataTypeByParentId(this.groupId);
                  }
                });
            } else {
              let data = {
                name: this.ruleForm.name,
                id: this.ruleForm.id,
                pId: this.ruleForm.pId
              };
              this.$api.bridge.updateDataType(data).then(res => {
                if (res.data.success) {
                  this.$vs.notify({
                    text: "修改成功",
                    color: "success"
                  });
                  this.dialogVisible = false;
                  this.queryAllSystemDataTypeByParentId(this.ruleForm.pId)
                  this.resetBridge()
                }
              });
            }
        }
      });
    }
  }
};
</script>
<style lang="scss">
.tangram-suggestion {
  z-index: 999999;
}
</style>
<style scoped lang="scss">
/deep/.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
/deep/.el-table__row {
  height: 30px;
}
.cell {
  max-height: 34px !important;
}
.bridge {
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: space-between;
  .right {
    width: 100%;
    height: 100%;
    .flexBetween {
      display: flex;
      justify-content: space-between;
      .paddingLeft {
        margin-left: 20px;
      }
    }
    .table {
      margin-top: 20px;
      height: calc(60% - 10px);
    }
    .page {
      margin-top: 20px;
      text-align: center;
    }
  }
}
/deep/.el-dialog__title {
  color: #177dff;
  font-size: 2rem;
  text-align: center;
}
/deep/.el-dialog__header {
  text-align: center;
  padding: 34px 20px 10px;
  margin-top: 36vh;
}
</style>
